<template>
  <view>
    <!-- 1.0  设置搜索框 -->
    <Search />
    <!-- 2.0  轮播图分区 -->
    <!-- circular无缝滚动 -->
    <swiper
      class="swiper"
      indicator-dots
      autoplay
      circular
      indicator-color="rgba(0,0,0,.3)"
      indicator-active-color="#EA4350"
    >
      <swiper-item v-for="item in swiperData" :key="item.goods_id">
        <image class="swiper_image" :src="item.image_src" mode="aspectFill" />
      </swiper-item>
    </swiper>
    <!--  3.0  入口导航 -->
    <view class="nav">
      <navigator
        v-for="item in navData"
        :key="item.name"
        class="nav-item"
        hover-class="none"
        :open-type="item.open_type"
        :url="item.navigator_url"
      >
        <image class="nav_image" :src="item.image_src" mode="aspectFill" />
      </navigator>
    </view>
    <!--  4.0  首页楼层 -->
    <view class="floor" v-for="(item, index) in floorData" :key="index">
      <view class="floor_title">
        <image
          class="floor_title_image"
          :src="item.floor_title.image_src"
          mode="aspectFill"
        />
      </view>
      <view class="floor_list">
        <navigator
          class="floor_list_item"
          v-for="item2 in item.product_list"
          :key="item2.name"
          :url="item2.navigator_url"
          :open-type="item2.open_type"
          hover-class="none"
        >
          <image
            class="floor_list_image"
            :style="'width:' + item2.image_width + 'rpx'"
            :src="item2.image_src"
            mode="aspectFill"
          />
        </navigator>
      </view>
    </view>
  </view>
</template>

<script>
import Search from "@/components/Search/index.vue";
import { homeCatitems, homeFloordata, homeSwiper } from "../../api/index";
export default {
  // 一定要注册组件！！
  components: {
    Search,
  },
  data() {
    return {
      swiperData: [],
      navData: [],
      floorData: [],
    };
  },
  async onLoad() {
    //  1.0  轮播图接口。
    const res = await homeSwiper();
    this.swiperData = res.data.message;

    // 2.0  获取入口导航数据：
    const resNavData = await homeCatitems();
    this.navData = resNavData.data.message;

    // 3.0   封装楼层数据：
    const resFloordata = await homeFloordata();
    resFloordata.data.message.forEach((item) => {
      item.product_list.forEach((item2) => {
        item2.navigator_url = item2.navigator_url.replace("?", "/main?");
      });
    });
    this.floorData = resFloordata.data.message;
  },
  methods: {},
};
</script>

<style lang="less" scoped>
//  2.0 轮播图
.swiper {
  width: 750rpx;
  height: 340rpx;
  .swiper_image {
    width: 750rpx;
    height: 340rpx;
  }
}
//  3.0 入口导航
.nav {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  padding: 12rpx 0 40rpx;
  .nav-item {
    .nav_image {
      width: 128rpx;
      height: 140rpx;
    }
  }
}
//  4. 0 楼层渲染
// 楼层标题
.floor {
  margin-top: 10rpx;
  .floor_title {
    .floor_title_image {
      height: 60rpx;
      width: 750rpx;
    }
  }
  // 楼层列表
  .floor_list {
    //   清除浮动带来的影响
    overflow: hidden;
    .floor_list_item {
      // 所有图片左浮动
      float: left;
      margin-left: 14rpx;
      margin-bottom: 10rpx;
      // :nth-child(n) 选择器匹配属于其父元素的第 N 个子元素，不论元素的类型。
      &:nth-child(1) {
        .floor_list_image {
          height: 386rpx;
        }
      }
      .floor_list_image {
        height: 188rpx;
        // vertical-align: top;  可以实现顶端对齐  去掉顶端缝隙
        vertical-align: top;
      }
    }
  }
}
</style>
